<template>
  <Dialog v-model="dialogVisible" :title="dialogTitle" width="1200" v-loading="formLoading">
    <div>
      <el-descriptions title="用例基本信息" :column="2" border class="base">
        <el-descriptions-item
          label="名称："
          align="left"
          label-align="right"
        >
          {{ info.name }}
        </el-descriptions-item>
        <el-descriptions-item
          label="标识："
          align="left"
          label-align="right"
        >
          {{ info.logo }}
          <!-- <el-tooltip :content="info.logo" placement="top" effect="light">
            <el-tag type="primary">标识</el-tag>
          </el-tooltip> -->
        </el-descriptions-item>
        <el-descriptions-item label="测试类型：" align="left" label-align="right">
          <dict-tag :type="DICT_TYPE.TEST_TYPE" :value="info.testType" />
        </el-descriptions-item>
        <el-descriptions-item label="用例状态：" align="left" label-align="right">
          <dict-tag :type="DICT_TYPE.TEST_CASE_STATUS" :value="result" />
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions border class="info">
        <el-descriptions-item label="初始化条件：" align="left" label-align="right" width="150">
          <el-tooltip :content="info.initialize" placement="top" effect="light">
            {{
              info.initialize && info.initialize.length > 5
                ? info.initialize.substr(0, 5) + '...'
                : info.initialize
            }}
          </el-tooltip>
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions border class="info">
        <el-descriptions-item label="测试方法：" align="left" label-align="right" width="150">
          <el-tooltip :content="info.method" placement="top" effect="light">
            {{
              info.method && info.method.length > 5 ? info.method.substr(0, 5) + '...' : info.method
            }}
          </el-tooltip>
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions border class="info">
        <el-descriptions-item label="通过准则：" align="left" label-align="right" width="150">
          <el-tooltip :content="info.passCondition" placement="top" effect="light">
            {{
              info.passCondition && info.passCondition.length > 5
                ? info.passCondition.substr(0, 5) + '...'
                : info.passCondition
            }}
          </el-tooltip>
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions border class="info">
        <el-descriptions-item label="终止条件：" align="left" label-align="right" width="150">
          <el-tooltip :content="info.stopCondition" placement="top" effect="light">
            {{
              info.stopCondition && info.stopCondition.length > 5
                ? info.stopCondition.substr(0, 5) + '...'
                : info.stopCondition
            }}
          </el-tooltip>
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions border class="info">
        <el-descriptions-item label="关联问题：" align="left" label-align="right" width="150">
          <el-tag
            type="primary"
            v-for="item of info.bugIds"
            :key="item"
            @click="handleBugInfo(item)"
            >{{ item }}</el-tag
          >
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions border class="info">
        <el-descriptions-item label="综述：" align="left" label-align="right" width="150">
          {{ info.review }}
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions border class="info" v-if="info.result == 4">
        <el-descriptions-item label="阻塞原因：" align="left" label-align="right" width="150">
          {{ info.remarks }}
        </el-descriptions-item>
      </el-descriptions>
      <header>用例步骤</header>
      <el-table ref="tableRef" :data="list" style="width: 100%" :show-overflow-tooltip="true">
        <el-table-column type="index" width="80" label="序号" align="center" />
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-input v-model="scope.row.operation" type="textarea" rows="3" disabled="true" />
          </template>
        </el-table-column>
        <el-table-column label="期望结果" align="center">
          <template #default="scope">
            <el-input v-model="scope.row.expect" type="textarea" rows="3" disabled="true"/>
          </template>
        </el-table-column>
        <el-table-column label="实际结果" align="center">
          <template #default="scope">
            <el-input v-model="scope.row.actual" type="textarea" rows="3"/>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <template #footer>
      <el-button :disabled="formLoading" type="primary" @click="access" v-if="formType == 'create'">通 过</el-button>
      <el-button :disabled="formLoading" type="danger" @click="fail" v-if="formType == 'create'">失 败</el-button>
      <el-button :disabled="formLoading" type="warning" @click="lock" v-if="formType == 'create'">阻 塞</el-button>
      <el-button @click="dialogVisible = false">{{ formType == 'create'?'取 消':'关 闭'}}</el-button>
    </template>
    <!-- 失败 -->
    <Fail ref="failRef" @success="handleFailSuccess" @case-success="handleCaseSuccess" />
    <!-- 锁定 -->
    <Lock ref="lockRef" @success="handleLockSuccess" />
    <!-- 问题详情 -->
    <BugInfo ref="InfoRef" />
  </Dialog>
</template>
<script lang="ts" setup>
defineOptions({ name: 'Info' })
import * as TestPlanApi from '@/api/testPlan'
import { useAppStore } from '@/store/modules/app'
import Fail from './Fail.vue'
import Lock from './Lock.vue'
import BugInfo from './BugInfo.vue'
import { DICT_TYPE } from '@/utils/dict'
import { useUserStore } from '@/store/modules/user'
const userStore = useUserStore()
const appStore = useAppStore()
const projectId = computed(() => appStore.getSelectProject)
const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false)
const failRef = ref() // 失败弹窗ref
const lockRef = ref() // 锁定弹窗ref
const info = ref({} as any) // 详情数据
const list = ref([] as any) // 详情下用例步骤数据列表
const params = ref({} as any) // 失败、通过、锁定等接口参数
const InfoRef = ref() // 问题详情弹窗ref
const result = ref('') // 用例状态 因为详情没有返回
const formType = ref('')
const userId = computed(() => userStore.user.id ?? '')

watchEffect(() => {
  params.value = {
    id: info.value.id,
    testPlanId: info.value.testPlanId,
    remarks: '',
    bugIds: [],
    caseSteps: list.value,
    projectId: projectId.value,
    executeTestUserId:userId.value
  }
})
/** 打开弹窗 */
const open = async (row,type) => {
  dialogVisible.value = true
  formType.value = type
  dialogTitle.value = type=='create'?'用例执行':'用例详情'
  result.value = row.result
  getInfo(row.id)
}
// 获取详情
const getInfo = async (id) => {
  formLoading.value = true
  try {
    let data = await TestPlanApi.getTestCaseInfo({ id })
    info.value = data
    list.value = data.caseSteps
  } finally {
    formLoading.value = false
  }
}

defineExpose({ open })

/** 提交表单 */
const emit = defineEmits(['success'])
// 锁定
const lock = async () => {
  tips()
  lockRef.value.open()
}
// 通过
const access = async () => {
  tips()
  formLoading.value = true
  try {
    await TestPlanApi.successTestCase(params.value)
    message.success('已通过')
    emit('success')
  } finally {
    formLoading.value = false
    dialogVisible.value = false
  }
}
// 失败
const fail = () => {
  tips()
  failRef.value.open('create', info.value)
}
// 实际结果填写提示
const tips = () => {
  // let flag = list.value.some((l) => !l.actual)
  // if (flag) {
  //   message.warning('请填写实际结果')
  //   return
  // }
}
// 失败确定
const handleFailSuccess = async (ids) => {
  formLoading.value = true
  try {
    params.value.bugIds = ids
    await TestPlanApi.failTestCase(params.value)
    message.success('处理成功')
    emit('success')
  } finally {
    formLoading.value = false
    dialogVisible.value = false
  }
}
// 锁定确定
const handleLockSuccess = async (val) => {
  formLoading.value = true
  try {
    params.value.remarks = val.remarks
    await TestPlanApi.lockTestCase(params.value)
    message.success('锁定成功')
    emit('success')
  } finally {
    formLoading.value = false
    dialogVisible.value = false
  }
}
// 关联问题单成功
const handleCaseSuccess = (val) => {
  const ids = val.map((v) => v.id)
  handleFailSuccess(ids)
}
// 问题单详情
const handleBugInfo = async (id) => {
  InfoRef.value.open('view', id)
}
</script>
<style scoped lang="scss">
:deep(.base) {
  tr {
    display: flex;
    td{
      width: 419px !important;
    }
    td:nth-child(odd) {
      width: 150px !important;
    }
    
  }
}
:deep(.info) {
  position: relative;
  top: -1px;
}
.el-tag {
  margin-right: 10px;
}
header {
  font-weight: 700;
  margin: 10px 0;
  font-size: 16px;
  color: #303133;
}
</style>
